<template>
    <MyDialog :model-value="true" :type="DialogType.C2" title="历史曲线" @close="onClose">
        <el-form ref="StatusMonitorDetailFormRef" label-width="100" :model="thisData" disabled>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="编码" prop="code">
                        <el-input v-model="thisData.code" maxlength="50"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="在用绳名称" prop="name">
                        <el-input v-model="thisData.name" maxlength="50"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="规格型号" prop="guiGe">
                        <el-input v-model="thisData.guiGe" maxlength="50"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="直径" prop="diameter">
                        <el-input v-model="thisData.diameter" maxlength="50"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="安装长度" prop="installLengthNum">
                        <el-input v-model="thisData.installLengthNum" maxlength="50"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="绳子条数" prop="cnt">
                        <el-input v-model="thisData.cnt" maxlength="50"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick">
            <el-tab-pane label="LA" name="LA">
                <div id="LAEcharts" class="lineEcharts"></div>
            </el-tab-pane>
            <el-tab-pane label="DIA" name="DIA">
                <div id="DIAEcharts" class="lineEcharts"></div>
            </el-tab-pane>
            <el-tab-pane label="LMA" name="LMA">
                <div id="LMAEcharts" class="lineEcharts"></div>
            </el-tab-pane>
            <el-tab-pane label="LL" name="nianJu">
                <div id="nianJuEcharts" class="lineEcharts"></div>
            </el-tab-pane>
        </el-tabs>
    </MyDialog>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { DialogType } from "@/_gx/TsEnums";
import * as echarts from "echarts";

const activeName = ref("LA");

//定义当前页面数据对象
const thisData = ref<any>({});
const echartsData = ref<any>([]);

const chart_arr = ref<any>([]);

//初始化
const Init = (autoID) => {
    App.CallApi(Api.UsingWirerope.GetStatusMonitoryHistoryByID(autoID), {
        success: (res) => {
            thisData.value = res;
            echartsData.value = res.checkWireropeHistoryList;
            initEcharts();
        },
    });
};
//初始化echarts图表
const initEcharts = () => {
    for (var i = 0; i < echartsData.value.length; i++) {
        let item = echartsData.value[i];
        let echartName = item.tabName == "捻距变化" ? "nianJu" : item.tabName;
        let chartDom = echarts.init(document.getElementById(echartName + "Echarts"));
        let xAxisArr = item.x_Date.map((x) => {
            return Gx.YMD(x);
        });
        let legendsArr = item.items.map((x) => {
            return x.name;
        });

        let options = {
            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: legendsArr,
            },
            grid: {
                top: "8%",
                left: "12px",
                right: "12px",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: xAxisArr,
            },
            yAxis: {
                type: "value",
                axisLabel: {
                    formatter: "{value} %",
                },
            },
            series: [],
        };
        for (var j = 0; j < item.items.length; j++) {
            options.series.push({
                name: item.items[j].name,
                type: "line",
                data: item.items[j].num,
            });
        }

        chartDom.setOption(options);
        chart_arr.value.push(chartDom);
    }

    window.addEventListener("resize", () => {
        for (let i = 0; i < chart_arr.value.length; i++) {
            chart_arr.value[i].resize();
        }
    });
};

//关闭
const onClose = () => {
    emits("close", false);
};

const tabClick = (obj) => {
    setTimeout(() => {
        for (let i = 0; i < chart_arr.value.length; i++) {
            chart_arr.value[i].resize();
        }
    }, 50);
};

//向上抛出的事件与方法
const emits = defineEmits(["close"]);
defineExpose({ Init });
</script>

<style lang="scss">
.lineEcharts {
    width: 100%;
    height: 320px;
}
</style>
